<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="${ctx}/static/css/com.css"/>
		<link rel="stylesheet" type="text/css" href="${ctx}/static/css/ty.css"/>
		<style type="text/css">
			table{
    width:50%;
    position:relative;
    margin:30px auto;
    border-collapse: collapse;
    border:1px solid gray;
      }
th{
    background: cornflowerblue;
    height:2.5em;
   }
    .tdone{
        width:10%;
        }
    .tdtwo{
         width:35%;
    }
    .tdthree{      
         width:35%;
     }
     .tdfour{      
         width:200%;
     }
  td{
        height:2em;       
          text-align: center;
         border:1px solid #ccc;
     }
     .num{
         display:inline-block;
        width:3em;
    }
 input{
        height:2em;
    }
    .talast{
        text-align: left;
    }

		</style>
	</head>
	<body ng-app="myapp" ng-controller="myctrl">
		<!--通用头部-->
		<div id="top">
			<div class="top">
				<a class="logo" href="##">
				<img src="${ctx}/static/img/鱼.png" style="width:106px;height: 50px;"/>
			    </a>
				<ul class="nav">
				<li>
					<a class="active" href="ToIndex">首页</a>
				</li>
				<li>
					<a href="ToCarList">购物车</a>
				</li>
				<li>
					<a href="ToPersonalCenter">个人中心</a>
				</li>
			</ul>
			<div class="tool">
				<div class="search">
					<input type="text" name="search" placeholder="在线搜索" />
					<a href="##" class="searchBtn"></a>
				</div>
				<div class="userbox">
					<a id="loginBtn" href="##"></a>
				</div>
				<div class="userbox1">
					<a id="loginBtn1" href="DoDelSession">退出登录</a>
				</div>
			</div>
			</div>
		</div>
		
		<!--购物车主体-->
		<table>
         <thead>
             <tr>
                 <th class="tdone">商品名称</th>
                 <th class="tdtwo">图片</th>           
                 <th class="tdthree">价格</th>
                 <th class="tdfour">操作</th>
             </tr>
         </thead>
          <tbody>
          <c:forEach items="${list}" var="l">
             <tr class="trclass">
                 <td class="tdone ">${l.name}</td>
                 <td class="tdtwo"><img src="${ctx}${l.picture}"  style="height: 100px;width: 100px"></td>
                 <td class="tdthree">${l.price}</td>
                 <td class="tdfour"><a  href="DoDelCar?commodityId=${l.commodityId}"><button class="del">删除</button></a></td>
             </tr>
        </c:forEach>
             <tr><td  colspan="6"  class="talast"  style="padding-right: 10px" align="right">共计花费 <span class="pricetal">${price}</span></td></tr>
         </tbody>
         	<tr><td colspan="6" class="talast" style="padding-right: 10px" align="right"><a href="DoBuyCar"><input type="button" value="结算购物车"></td></a></tr>
     </table>
	</body>

</html>
